<!--
 * @Author: chenjianxin
 * @Date: 2020-07-04 10:42:07
 * @LastEditTime: 2021-03-18 17:21:37
 * @LastEditors: ganxiaochuan
 * @Description: In User Settings Edit
 * @FilePath: \ui-standard\src\components\AppHeader.vue
-->
<template>
  <el-header height="48px">
    <!-- <iframe src="http://120.35.29.219:1180/dsports-sso/logout" ref="CMCC_LOGINOUT" frameborder="0" v-if="IS_CMCC_LOGIN_OUT"></iframe> -->
    <div class="header-left">
      <header-tabbar></header-tabbar>
    </div>
    <div class="header-right">
      <div class="userName">
        <!-- <div class="search">
          <span><i class="el-icon-search"></i></span>
        </div>
        <div class="search notice">
          <el-popover
              placement="bottom"
              width="340"
              trigger="click">
              <div class="notice">
                <el-tabs v-model="activeName" @tab-click="handleClick">
                  <el-tab-pane label="通知 (4)" name="first">
                    <div class="notice-box">
                      <div class="notice-item" v-for="(item, index) in noticeData" :key="index">
                        <img :src="require(`../assets/images/notice${item.flag}.png`)" alt="">
                        <div>
                          <h2>{{item.text}}</h2>
                          <p>{{item.date}}</p>
                        </div>
                      </div>
                      <div class="notice-btn">
                        <div>清空通知</div><div>查看更多</div>
                      </div>
                    </div>
                  </el-tab-pane>
                  <el-tab-pane label="消息 (3)" name="second">消息</el-tab-pane>
                  <el-tab-pane label="代办 (3)" name="third">代办</el-tab-pane>
                </el-tabs>
              </div>
              <i class="el-icon-bell" slot="reference"></i>
          </el-popover>
          <el-badge :value="12"></el-badge>
        </div> -->
        <el-dropdown @command="dropdownCommand" trigger="click">
          <div class="el-dropdown-link">
            <h2>
              <span class="name">{{name || userName || userMobile || '管理员'}} <i class="el-icon-arrow-down"></i></span>
            </h2>
          </div>
          <el-dropdown-menu slot="dropdown">
            <el-dropdown-item command="a" class="change-password-dropdown-item" v-if="!DEV_CONFIG.USE_CMCC_SSO_LOGIN || !DEV_CONFIG.LOGIN_TYPE || DEV_CONFIG.LOGIN_TYPE === 'password'">修改密码</el-dropdown-item>
            <el-dropdown-item command="b">退出</el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>
      </div>
      <div class="lanage" v-if="DEV_CONFIG.SHOW_CHANGE_LANGUAGE" @click="changeLanguage()">EN</div>
    </div>
  </el-header>
</template>
<script>
import { mapActions, mapState, mapMutations } from 'vuex'
import apis from '@/apis'
import HeaderTabbar from './HeaderTabbar'
import DEV_CONFIG from '@/config'

export default {
  data () {
    return {
      activeName: 'first',
      noticeData: [
        { text: '你收到了14份新周报', date: '两天前', flag: '1' },
        { text: '左侧图标用于区分不同的类型', date: '两天前', flag: '2' },
        { text: '内容不要超过两行字，超出截断', date: '两天前', flag: '3' },
        { text: '内容不要超过两行字，超出截断', date: '两天前', flag: '3' },
        { text: '内容不要超过两行字，超出截断', date: '两天前', flag: '4' }
      ],
      IS_CMCC_LOGIN_OUT: false
    }
  },
  computed: {
    ...mapState(['userName', 'access_token', 'sub_module_id', 'CONFIG', 'userMobile', 'mchId', 'name', 'DROPDOWNBOX']),
    DEV_CONFIG() {
      if (!DEV_CONFIG.SHOW_CHANGE_LANGUAGE) {
        DEV_CONFIG.SHOW_CHANGE_LANGUAGE = false
      }
      return DEV_CONFIG
    }
  },
  components: { HeaderTabbar },
  methods: {
    ...mapMutations(['setToken']),
    handleClick () {
      // console.log('dianji')
    },
    ...mapActions(['loginOut', 'changeLanguage', 'setUserInfo', 'setMchId']),
    dropdownCommand (command) {
      if (command === 'a') {
        this.modifyPasswordButton()
      } else {
        this.outButton()
      }
    },
    modifyPasswordButton () {
      this.$emit('updatePassword', true)
    },
    async outButton () {
      this.$http.post(apis._auth_logout).then(() => {
        this.loginOutEvent()
      }).catch(() => {
        this.loginOutEvent()
      })
    },
    loginOutEvent() {
      let cmccUrl = this.DROPDOWNBOX.SYSTEM_URL.filter(
        item => item.label === 'cmcc'
      )
      let login_url = DEV_CONFIG.USE_CMCC_SSO_LOGIN ? `${cmccUrl[0].value}/dsports-sso/logout` : `/login`
      // console.log(login_url)
      this.setToken('')
      this.loginOut()
      if (DEV_CONFIG.USE_CMCC_SSO_LOGIN) {
        window.location.href = login_url
      } else {
        this.$router.push(login_url)
      }
    }
  }
}
</script>
<style lang="scss">
.el-popper{
  padding: 0px;
  .notice{
    min-height: 280px;
    .el-tabs__item.is-active{
      color: #1890FF;
    }
    .el-tabs__nav-scroll{
      display: flex;
      justify-content: center;
    }
  }
}
.search .el-badge{
  position: absolute;
  left: 15px;
  z-index: -1;
}
.notice{
  .notice-box{
    padding: 0px 12px;
    .notice-item{
      display: flex;
      padding: 15px 0px;
      align-items: center;
      line-height: 30px;
      border-bottom: 1px solid #E8E8E8;
      img{
        width: 32px;
        height: 32px;
        margin-right: 15px;
      }
      h2{
        font-size: 14px;
        font-weight: 400;
      }
      p{
        font-size: 12px;
        color: rgba(0, 0, 0, 0.25);
      }
    }
    .notice-btn{
      display: flex;
      text-align: center;
      height: 40px;
      line-height: 40px;
      div{
        width: 50%;
        cursor: pointer;
      }
      div:first-child{
        border-right: 1px solid #E8E8E8;
      }
    }
  }
}
</style>
<style lang="scss" scoped>
.el-header {
  background: #FFFFFF;
  display: flex;
  line-height: 48px;
  box-shadow: 0px 1px 4px 0px rgba(0, 21, 41, 0.12);
  .header-left {
    flex-grow: 1;
    overflow: hidden;
  }
  .header-right {
    width: 170px;
    flex-grow: 0;
    // flex-shrink: 0;
    overflow: hidden;
    font-size: 12px;
    .userName {
      display: flex;
      justify-content: flex-end;
      margin: 0 10px;
      .name {
        font-size: 12px;
        margin-left: 20px;
      }
      .search{
        position: relative;
        width: 30px;
        text-align: center;
        cursor: pointer;
        z-index: 1;
        i{
          font-size: 14px;
        }
      }
    }
    .lanage {
      float: right;
      padding: 0 10px 0 30px;
      position: relative;
      cursor: pointer;
      &::before {
        display: inline-block;
        content: '';
        width: 1px;
        height: 20px;
        background:#D8D9DD;
        position: absolute;
        top: 8px;
        left: 0;
      }
    }
  }
}
</style>
